<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电子签名</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }

      .g_btn {
        display: flex;
        height: 60px;
        justify-content: center;
        align-items: center;
      }

      .g_btn #saveImage {
        margin-left: 20px;
        outline: 0 none;
        color: #fff;
        border: 0;
        padding: 3px 20px;
        border-radius: 3px;
        background-color: #1677ff;
        box-shadow: 0 2px 2px rgba(5, 145, 255, 0.1);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <canvas id="canvas"></canvas>
      <div class="g_btn">
        <button id="clear">清空画布</button>
        <button id="saveImage">保存签名</button>
      </div>
      <div class="imgs" id="imgs"></div>
    </div>
    <script>
      // 获取屏幕宽度
      let width = document.body.clientWidth - 30;
      let height = (width / 9) * 4;
      // 获取canvas
      let myCanvas = document.getElementById("canvas");
      myCanvas.width = width;
      myCanvas.height = height;
      //获取2d对象
      let ctx = myCanvas.getContext("2d");
      //清空画布
      let clear = document.getElementById("clear");
      // 保存签名
      let saveImage = document.getElementById("saveImage");
      // 保存的盒子
      let imgs = document.getElementById("imgs");
      // 控制线条是否画
      let isMouseMove = false;
      // 上次线条位置
      let lastX, lastY;
      let offset = myCanvas.getBoundingClientRect();
      function start(e) {
        e.preventDefault();
        isMouseMove = true;
        drawLine(
          e.changedTouches[0].clientX - offset.left,
          e.changedTouches[0].clientY - offset.top,
          false
        );
      }
      function mousedown(e) {
        e.preventDefault();
        isMouseMove = true;
        drawLine(e.offsetX, e.offsetY, false);
      }
      function move(e) {
        if (isMouseMove) {
          drawLine(
            e.changedTouches[0].clientX - offset.left,
            e.changedTouches[0].clientY - offset.top,
            true
          );
        }
      }
      function mousemove(e) {
        if (isMouseMove) {
          drawLine(e.offsetX, e.offsetY, true);
        }
      }
      function end(e) {
        isMouseMove = false;
      }
      function mouseup(e) {
        isMouseMove = false;
      }
      function cancel(e) {
        isMouseMove = false;
      }

      //画线
      function drawLine(x, y, isT) {
        if (isT) {
          ctx.beginPath();
          ctx.lineWidth = 2; //设置线宽状态
          ctx.strokeStyle = "blue"; //设置线的颜色状态
          ctx.lineCap = "round";
          ctx.lineJoin = "round";
          ctx.moveTo(lastX, lastY);
          ctx.lineTo(x, y);
          ctx.stroke();
          ctx.closePath();
        }
        // 每次移动都要更新坐标位置
        lastX = x;
        lastY = y;
      }

      //清空画图
      function clearCanvas() {
        imgs.innerHTML = "";
        ctx.beginPath();
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
        ctx.closePath(); //可加入，可不加入
      }
      //保存图片
      function exportImage() {
        var images = myCanvas.toDataURL("image/png");
        const alink = document.createElement("a");
        alink.setAttribute("href", images);
        alink.setAttribute("download", Date.now() + ".png");
        document.body.appendChild(alink);
        alink.click();
        document.body.removeChild(alink);
        clearCanvas();
      }
      // 移动端
      myCanvas.addEventListener("touchstart", start);
      myCanvas.addEventListener("touchmove", move);
      myCanvas.addEventListener("touchend", end);
      myCanvas.addEventListener("touchcancel", cancel);
      // pc
      myCanvas.addEventListener("mousedown", mousedown);
      myCanvas.addEventListener("mouseup", mouseup);
      myCanvas.addEventListener("mousemove", mousemove);
      clear.addEventListener("click", clearCanvas);
      saveImage.addEventListener("click", exportImage);
    </script>
  </body>
</html>
